<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="font_3777686_o2d4wfakts/iconfont.css">
</head>

<body>
    <header>
        <h1><span class="title">后台管理系统</span><span class="iconfont icon-gengduo"></span></h1>
        <div class="user">
            <span>当前用户: bootstap中文</span>&nbsp;&nbsp;&nbsp;
            <span>角色:管理员</span>
        </div>
    </header>
    <main>
        <ul>
            <li><span class="iconfont icon-shouye"></span>后台首页</li>
            <li><span class="iconfont icon-jiegousheji"></span>设计元素</li>
            <li><span class="iconfont icon-bianjishuru-xianxing"></span>表单元素</li>
            <li><span class="iconfont icon-xianshiqi"></span>示例页面</li>
            <li><span class="iconfont icon-liebiao"></span>常用列表</li>
            <li><span class="iconfont icon-chajian1"></span>脚本插件</li>
            <li><span class="iconfont icon-shuzhuangtu"></span>统计图表</li>
        </ul>
        <div class="data">
            <div class="nav">
                <div class="nav-left"><span><< </span><span>欢迎首页</span></div>
                <div class="nav-right"><span>>></span><span>页面操作</span></div>
            </div>
            <div class="money">
                <div class="reven">
                    <p>今日收入</p>
                    <p>100,000,00</p>
                </div>
                <div class="reven">
                    <p>昨日收入</p>
                    <p>100,000,00</p>
                </div>
                <div class="reven">
                    <p>月度累计收入</p>
                    <p>1,000,000,000</p>
                </div>
                <div class="reven">
                    <p>年度累计守护如</p>
                    <p>5,000,000,000,000</p>
                </div>
            </div>
            <div class="chart">
                <div class="histogram">

                </div>
                <div class="line-chart">

                </div>

            </div>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>状态</th>
                        <th>处理情况</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
    </main>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./promise-ajax函数.js"></script>
<script src="./Mock数据包+渲染函数.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script>
    //1.创建并初始化一个echarts实例
    let mainLeft = document.querySelector('main .data .chart .line-chart');
    let e = echarts.init(mainLeft);

    //2.绘制图表
    let getname = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'];
    let getvalue = [50, 40, 60, 80, 20, 50, 60, 36, 45, 20, 59, 70, 55];
    let getvalue1 = [40, 30, 70, 65, 40, 80, 58, 30, 56, 65, 55, 70, 80];

    e.setOption({
        backgroundColor: '#fff',
        title: {
            text: "\n每年收入走势",

        },
        grid: {
            top: '15%',
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            icon: "roundRect",
            data: [
                {
                    name: '每年收入走势',
                    itemStyle: {
                        symbol: "rect",
                        color: "#67cb00"
                    }
                },
                {
                    name: '每年同期收入走势',
                    itemStyle: {
                        color: "#cccdcf"
                    }
                }
            ],
            right: "35%",
            top: "5%",
            textStyle: {
                color: "#A1D5FF",
                fontSize: 12
            },
            itemWidth: 10,  // 设置宽度
            itemHeight: 15, // 设置高度
            itemGap: 10, // 设置间距

        },
        xAxis: [{
            data: getname,
            axisLabel: {
                margin: 10,
                color: '#A1D5FF',
                textStyle: {
                    fontSize: 12
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#102E74',
                }
            },
            axisTick: {
                show: false
            }, 
            splitLine: {
                show:true,
                lineStyle: {
                    color: 'gray',
                    type:'solid'
                }
            }
        }],
        yAxis: [{
            splitNumber: 10,
            type: 'value',
            axisLabel: {
                color: '#A1D5FF',
                textStyle: {
                    fontSize: 12
                },
            },

            axisLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show:true,
                lineStyle: {
                    color: 'gray',
                    type:'solid'
                }
            }
        }],
        series: [
            {
                name: '每年收入走势',
                symbol: "circle",
                smooth: true,
                symbolSize: 8,
                type: "line",
                data: getvalue,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: '#67cb00',
                        shadowColor: 'rgba(93,241,255 ,0.7)',
                        shadowBlur: 10,
                    },

                }
            },
            {
                name: '每年同期收入走势',
                symbolSize: 8,
                smooth: true,
                symbol: "circle",
                type: "line",
                data: getvalue1,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: '#cccdcf',
                        shadowColor: '#FFEED9FF',
                        shadowBlur: 10,
                    },

                }
            }
        ]
    })
</script>
<script>
    let rightR = document.querySelector('main .data .chart .histogram');
    let r = echarts.init(rightR);
    r.setOption({
        backgroundColor: '#fff',
        title: {
            text: "\n每月收入",
            subtextStyle: {
                color: '#eff6fb',
                fontSize: 14,
                fontWeight: 'normal'
            },
       
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true,
                    backgroundColor: '#333'
                }
            }
        },
        grid: {
            containLabel: true,
            top: '15%',
            left: '3%',
            right: '5%',
            bottom: '10%',
            containLabel: true
        },
        legend: {
            right: "35%",
            top: "5%",
            data: ['当前每月收入', '同期每月收入'],
            itemWidth: 15,
            itemHeight: 18,
            padding: 10
        },
        xAxis: {
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#6c96b7',
                    width: 1
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0,
                fontSize: 14
            },
            splitLine: {
                show:true,
                lineStyle: {
                    color: '#6c96b7',
                    type:'solid'
                }
            }

        },
        yAxis: [{
            type: 'value',
            axisLabel: {
                formatter: '{value}',
                fontSize: 16
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#6c96b7',

                }
            },
            splitLine: {
                show:true,
                lineStyle: {
                    color: '#25609d',
                    width: 1,
                    type:'solid'
                }
            }
        },
        ],
        series: [{
            name: '当前每月收入',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#c3e7ff'
                }
            },
            data: [1500, 2000, 2500, 3000, 4000, 5000, 3500,1500,2800,3400,2200,4500],
        },
        {
            name: '同期每月收入',
            type: 'bar',
            barWidth: 20,
            barGap: '20%',
            itemStyle: {
                normal: {
                    color: '#7a98d8'
                }
            },
            data:[2000, 2500, 2500, 4000, 2400, 3500, 2700,4600,2200,1700,3700,3300],
        }
        ]
    })
</script>
<script>
       render(data.list)
</script>